<template>
	<view>
		<view class="top-view" :style="'height:'+topHeight+'rpx;'"></view>
		<view :style="'padding-top:'+topHeight+'rpx;'"></view>
		<view class="search-view" v-if="type==1" :style="float && 'position: fixed;'">
			<view v-if="showBack" class="icon fanhui" @click="goBack"></view>
			<text class="icon sousuo"></text>
			<input class="ser-input" confirm-type="search" v-model="keyword" @confirm="search" :placeholder="name" />
		</view>
		<view class="title-view" v-if="type==2" :style="float && 'position: fixed;'">
			<view v-if="showBack" class="icon fanhui" @click="goBack"></view>
			<view class="title" :style="showBack && 'width:calc(100% - 160rpx);'">{{name}}</view>
		</view>
		<view v-if="float" :style="'padding-top:80rpx;'"></view>
	</view>
</template>

<script>
	export default {
		props: {
			type: Number,
			float: Boolean,
			name: String,
			path: String
		},
		data() {
			return {
				topHeight: 30,
				keyword: '',
				showBack: false
			}
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.topHeight = res.statusBarHeight * (750 / res.windowWidth)
				}
			})
			let pages = getCurrentPages()
			let currentPage = pages[pages.length - 1]
			if (currentPage.route.indexOf('tabBar') == -1) {
				this.showBack = true
			}
			if(currentPage.options.keyword){
				this.keyword = currentPage.options.keyword
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({})
			},
			search() {
				let pages = getCurrentPages()
				let currentPage = pages[pages.length - 1]
				let path = '/'+currentPage.route
				if(this.path && this.path != path){
					this.$goto(this.path+'?keyword='+this.keyword)
				}else{
					for (let n=0;n<this.$parent.$children.length;n++) {
						if(this.$parent.$children[n] && this.$parent.$children[n].allDatas){
							this.$parent.$children[n].keyword = this.keyword
							this.$parent.$children[n].create()
						}
					}
				}
			}
		}
	}
</script>

<style lang='scss'>
	.top-view {
		width: 100%;
		background: #fff;
		position: fixed;
		z-index: 1;
	}
	.fanhui {
		width: 80rpx;
		text-align: center;
	}
	.title-view {
		display: flex;
		background: #fff;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		text-align: center;
		color: #333;
		border-bottom: 1rpx solid rgb(245, 245, 245);
		z-index: 99;
		.title {
			width: 100%;
			text-align: center;
		}
	}
	.search-view {
		display: flex;
		align-items: center;
		height: 80rpx;
		background: #fff;
		width: 100%;
		z-index: 99;
		border-bottom: 1rpx solid rgb(245, 245, 245);
		.sousuo {
			font-size: 36rpx;
			width: 40rpx;
			margin-left: 30rpx;
			margin-right: -55rpx;
			line-height: 60rpx;
		}
		.ser-input {
			width: 450rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 60rpx;
			text-align: left;
			font-size: 28rpx;
			color: $font-color-base;
			border-radius: 25rpx;
			background: rgba(230, 230, 230, .6);
		}
	}
</style>
